<template>
  <NavBarVue title="消息通知"/>
  <view class="box">
    <view class="container" v-for="(item,index) in initMsgData.selectUserData" :key="item?.id">
      <!-- //时间徽标 -->
      <view class="badge">
        {{item?.createAt}}
      </view>
      <!-- 内容 -->
      <view class="content" @click="toActivityDetail(item)">
        <base-cover-image :src="item?.activityPic"/>
        <view class="msgTitle">
          {{item?.msgTitle}}
        </view>
        <view class="msgContent">
          {{item?.content}}
        </view>
      </view>
    </view>
  </view>
  <TabBarVue type='message'/>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted
} from 'vue'
import {
  useMessageStore,
  useUserStore
} from '@/store' //获取用户消息
const {
  selectAllMessage,
  selectUserMessage,
  initMsgData,
  updateMessageStatusIsRead
} = useMessageStore()
let result = ref()
const userStore = useUserStore()
// 渲染用的数据
onMounted(async () => {
  await userStore.getUserDetail()
  await selectUserMessage({
    userId: userStore.userInfo.userInfos.id,
    type: 1
  });
})
const toActivityDetail = async (item) => {
  await updateMessageStatusIsRead(item?.id)
  if (!item?.timingMsgTaskId) {
    uni.navigateTo({
      url: `/pages/tab-index/personal/activity-details/index?id=${item?.activityId}&origin=message`
    })
  } else {
    uni.navigateTo({
      url: "/pages/tab-message/activity/show-infomation-detail"
    })
  }
}
</script>

<style scoped lang="scss">
.box {
  width: 100vw;
  padding: 0 28rpx;
  box-sizing: border-box;
  background-color: #f6f6f6;
  padding-bottom: 187rpx;

  .badge {
    height: 44rpx;
    padding: 0 10rpx;
    color: white;
    background: #DDDDDD;
    border-radius: 22rpx;
    margin-top: 40rpx;
    margin-bottom: 20rpx;
  }

  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .content {
      width: 100%;
      background-color: #ffffff;
      border-bottom-left-radius: 10rpx;
      border-bottom-right-radius: 10rpx;

      .msgTitle {
        margin: 16rpx 0 16rpx 20rpx;
        font-size: 32rpx;
        font-weight: bold;
      }

      .msgContent {
        margin: 0 30rpx 16rpx 20rpx;
        color: gray;
        font-size: 28rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* 限制在3行内 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }


}
</style>